<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title th:text="#{cas.mfa.googleauth.pagetitle}">Google Authentication Registration Review View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
</head>

<body id="cas">
    <main class="container mt-3 mb-3">
        <div layout:fragment="content" id="login" class="mdc-card card p-4 m-auto w-lg-66">

            <!-- Confirmation Dialog For Removals -->
            <div th:replace="~{fragments/gauthConfirmation :: gauthConfirmation (
            dialogId='confirm-del-dialog',
            title='screen.authentication.gauth.delete.title', description='screen.authentication.gauth.delete.desc',
            eventId='delete', confirmationType='delete', actionButton='confirmAcctDeleteBtn', actionButtonLabel='screen.welcome.button.proceed')}">
                <a href="fragments/gauthConfirmation.html">Confirm</a>
            </div>
            <!-- Confirmation Dialog -->

            <!-- Confirmation Dialog For Registration -->
            <div th:replace="~{fragments/gauthConfirmation :: gauthConfirmation (
            dialogId='confirm-registration-dialog',
            title='screen.authentication.gauth.confirm.title', description='screen.authentication.gauth.confirm.desc',
            eventId='register', confirmationType='add', actionButton='confirmAcctRegisterBtn', actionButtonLabel='screen.welcome.button.register')}">
                <a href="fragments/gauthConfirmation.html">Confirm</a>
            </div>
            <!-- Confirmation Dialog -->
            
            <p th:text="#{screen.authentication.gauth.currentdevices(${principal.id})}"></p>

            <div class="card-text">
                <script type="text/javascript">
                    function confirmDelete(button) {
                        document.getElementById('confirmAccountId').value = button.dataset.deviceId;
                        cas.openDialog('confirm-del-dialog');
                    }
                    function confirmRegistration(button) {
                        cas.openDialog('confirm-registration-dialog');
                    }
                </script>
                
                <div th:each="device: ${registeredDevices}" class="border-bottom pb-3">
                    <form th:name="${'form-' + device.id}" th:id="${'form-' + device.id}" method="post">
                        <h4 class="d-flex align-items-center">
                            <ul style="list-style: none">
                                <code>
                                <li><i class="mdi mdi-laptop fas fa-laptop me-2" aria-hidden="true"></i>
                                    <span th:id="${'name-' + device.name}" th:utext="${device.name}">Device Name</span>
                                </li>
                                <li><i class="mdi mdi-account-clock fas fa-user-clock me-2" aria-hidden="true"></i>
                                    <span th:utext="${device.registrationDate}">Device Date</span>
                                </li>
                                <li><i class="mdi mdi-account-details fas fa-user-tag me-2" aria-hidden="true"></i>
                                    <span th:id="${'id-' + device.id}" th:utext="${device.id}">Device Id</span>
                                </li>
                                </code>
                            </ul>
                        </h4>
                        <button th:id="${'useButton-' + device.id}"
                                class="mdc-button mdc-button--raised btn btn-primary" th:value="#{screen.authentication.gauth.selectdevice}">
                            <span class="mdc-button__label" th:text="#{screen.authentication.gauth.selectdevice}">Use</span>
                        </button>
                        <button th:id="${'delButton-' + device.id}"
                                th:if="${#cas.isTrue(#objects.nullSafe(mfaDeviceRegistrationEnabled,true))}"
                                onclick="confirmDelete(this)"
                                type="button"
                                th:data-device-id="${device.id}"
                                class="mdc-button mdc-button--raised"
                                th:value="#{screen.authentication.gauth.deletedevice}">
                            <span class="mdc-button__label" th:text="#{screen.authentication.gauth.deletedevice}">Use</span>
                        </button>
                        <input type="hidden" name="execution" th:value="${flowExecutionKey}" />
                        <input type="hidden" name="accountId" th:value="${device.id}" />
                        <input type="hidden" name="_eventId" value="select" />
                    </form>
                </div>
            </div>

            <form method="post" id="fm2"
                  th:if="${gauthMultipleDeviceRegistrationEnabled && #cas.isTrue(#objects.nullSafe(mfaDeviceRegistrationEnabled,true))}">
                <p>
                <p th:utext="#{screen.authentication.gauth.reganotherdevice}"></p>
                <input type="hidden" name="_eventId_register" value="Register"/>
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <button id="register" class="mdc-button mdc-button--raised btn btn-primary me-2"
                        type="button"
                        onclick="confirmRegistration(this)"
                        name="register" accesskey="r" value="Register">
                    <span class="mdc-button__label" th:text="#{screen.welcome.button.register}">Register</span>
                </button>
            </form>
            <p>
        </div>
    </main>
</body>

</html>
